<template>
    <div>
        <div>
            <h4 style="text-align: center;color:#fff;">馆藏数量</h4>
            <h5 style="text-align: center;color:#fff;">共<span style="font-size: 0.3rem;color:#fd5b5e;">
            {{total}}</span>本</h5>
        </div>
        <div ref="chart" class="chart" style="width: 100%;height: 100%;"></div>
        </div>
</template>

<script>
import * as echarts from 'echarts'
import request from "@/utils/request";

export default {
    name: "Progress",
    data() {
        return {
            remain: 10,
            total: 100,
            chart: null,
        };
    },
    mounted() {
        this.getData();

    },
    methods: {
        async getData() {
            const { data: res } = await request.get("/views/remainAndTotal");
            this.remain = res.remain;
            this.total = res.total;
            console.log(this.remain, this.total);
            this.initChart();
        },
        initChart() {
            this.chart = echarts.init(this.$refs.chart);
            this.chart.setOption(this.getOption());
        },
        getOption() {
            const percentage = Math.round((this.remain / this.total)* 100) ;
            console.log(percentage);
            return {
                animationDuration: 5000,
                grid: {
                    top: 'center',
                    left: '8%',
                    right: '8%',
                    height: '30%',
                    containLabel: false
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        show: false,
                    },
                    max: 100,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                },
                yAxis: [{
                    type: 'category',
                    data: [],
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    z: 10
                }, {
                    type: 'category',
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: [],
                }],
                series: [{
                    name: '',
                    type: 'bar',
                    barWidth: '100%',
// barMaxWidth: '100%',
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            align: 'left', // 水平对齐
                            verticalAlign: 'center', // 垂直对齐
                            offset: [20, 0],
                            textStyle: {
                                color: '#FFFFFF',
                                fontWeight: 'normal',
                                fontFamily: 'SourceHanSansCN-Regular',
                                fontSize: 24
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
// borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
                            barBorderRadius: [0, 50, 50, 0],
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#B7DEFF' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#61AFFF' // 100% 处的颜色
                                    }
                                ]
                            },
                        }
                    },
                    data: [percentage],
                    z: 10
                }, {
                    type: 'bar',
                    barWidth: '100%',
                    yAxisIndex: 1,
                    silent: true,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color: '#B7DEFF'
                        }
                    },
                    data: [100],
                }]
            };

        }
    }
};
</script>
<style scoped>
</style>
